<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-row :gutter="20">
        <el-col :span="1"
          ><el-button
            type="primary"
            plain
            @click="(type = 'yearrange'), (date = '')"
            >年</el-button
          ></el-col
        >
        <el-col :span="1"
          ><el-button
            type="primary"
            plain
            @click="(type = 'monthrange'), (date = '')"
            >月</el-button
          ></el-col
        >
        <el-col :span="1"
          ><el-button
            type="primary"
            plain
            @click="(type = 'daterange'), (date = '')"
            >日</el-button
          ></el-col
        >
        <el-col :span="5">
          <el-date-picker
            v-model="date"
            :type="type"
            range-separator="To"
            start-placeholder="起始日期"
            end-placeholder="截止日期"
            @Change="handleStatistics"
          />
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="card-gradient users-card">
          <h3>销售额</h3>
          <p class="stat-value">￥{{ number.sell }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="card-gradient sales-card">
          <h3>采购额</h3>
          <p class="stat-value">￥{{ number.income }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="card-gradient orders-card">
          <h3>利润</h3>
          <p class="stat-value">￥{{ number.sell - number.income }}</p>
        </el-card>
      </el-col>
    </el-row>

    <div>
      <div ref="chartDom" style="height: 600px; width: 800px"></div>
      <div class="buttons"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { nextTick, ref } from "vue";
import { useTransition } from "@vueuse/core";
import {
  getStatisticsByYear,
  getStatisticsByMonth,
  getStatisticsByDay,
} from "@/api/finance/statistics";
import { ElMessage } from "element-plus";

const source = ref(0);

// 设置当前是按照何模式展示
const date = ref();

const type = ref("yearrange");

const number = ref({
  sell: null,
  income: null,
});




const chartDom = ref();
let chartInstance = null;

//动态设置图表数据
function setOption(resp) {
  chartInstance.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: resp.data.nameList,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "采购额",
        type: "bar",
        data: resp.data.sellAmountList,
        color: "#1e935d",
      },
      {
        name: "销售额",
        type: "bar",
        data: resp.data.incomeAmountList,
        color: "#22a6f2",
      },
    ],
  });

  
  number.value.sell = eval(resp.data.sellAmountList.join("+"));
  number.value.income = eval(resp.data.incomeAmountList.join("+"));
  console.log(number.value);
}

/** 日期选择之后 */
function handleStatistics() {
  let beginTime = null;
  let endTime = null;

  if (type.value == "yearrange") {
    //按照年展示
    beginTime = new Date(date.value[0]).getFullYear();
    endTime = new Date(date.value[1]).getFullYear();
    if (endTime - beginTime > 5) {
      ElMessage({
        message: "年份选取区间在5年内",
        type: "warning",
      });
    }
    getList(beginTime, endTime);
  } else if (type.value == "monthrange") {
    beginTime =
      new Date(date.value[0]).getFullYear() +
      "-" +
      (parseInt(new Date(date.value[0]).getMonth()) + 1) +
      "-1";
    endTime =
      new Date(date.value[1]).getFullYear() +
      "-" +
      (parseInt(new Date(date.value[1]).getMonth()) + 1) +
      "-1";
    getStatisticsByMonth({ beginTime, endTime }).then((resp) => {
      setOption(resp);
    });
  } else if (type.value == "daterange") {
    beginTime =
      new Date(date.value[0]).getFullYear() +
      "-" +
      (parseInt(new Date(date.value[0]).getMonth()) + 1) +
      "-" +
      new Date(new Date(date.value[0])).getDate();
    endTime =
      new Date(date.value[1]).getFullYear() +
      "-" +
      (parseInt(new Date(date.value[1]).getMonth()) + 1) +
      "-" +
      new Date(new Date(date.value[1])).getDate();
    getStatisticsByDay({ beginTime, endTime }).then((resp) => {
      setOption(resp);
    });
  }
}

/** 默认按照当前年搜索 展示月份收入  */
function getList(beginTime, endTime) {
  getStatisticsByYear({ beginTime: beginTime, endTime: endTime }).then(
    (resp) => {
      setOption(resp);
    }
  );
}
getList(2022, 2024);

onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  chartInstance = echarts.init(chartDom.value);
});
</script>

<style scoped>
.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}

#chart {
  width: 100%;
}
/* 渐变背景色样式 */
.card-gradient {
  color: white;
  border-radius: 10px;
  /* padding: 20px; */
}

.users-card {
  background: linear-gradient(45deg, #42a5f5, #478ed1);
}

.sales-card {
  background: linear-gradient(45deg, #66bb6a, #43a047);
}

.orders-card {
  background: linear-gradient(45deg, #ff7043, #d84315);
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>